<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>2048</title>

  <link href="style/main.css" rel="stylesheet" type="text/css">
  <link rel="shortcut icon" href="assets/icons/favicon.ico">
  <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png">
  <link rel="apple-touch-startup-image" href="assets/icons/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
  <link rel="apple-touch-startup-image" href="assets/icons/apple-touch-startup-image-640x920.png"  media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div class="container">
    <div class="heading">
      <h1 class="title">2048</h1>
      <div class="scores-container">
        <div class="score-container">0</div>
        <div class="best-container">0</div>
      </div>
    </div>

    <div class="above-game">
      <p class="game-intro">合并数字，获得 <strong>2048 方块！</strong></p>
      <div class="game-controls">
        <a class="restart-button">新游戏</a>
        <a class="settings-button" id="settings-button">设置</a>
      </div>
    </div>

    <div class="game-container">
      <div class="game-message">
        <p></p>
        <div class="lower">
	        <a class="keep-playing-button">继续游戏</a>
          <a class="retry-button">再试一次</a>
        </div>
      </div>

      <div class="grid-container">
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
      </div>

      <div class="tile-container">

      </div>
    </div>

    <p class="game-explanation">
      <strong class="important">游戏玩法：</strong> 使用 <strong>方向键</strong> 移动方块。当两个相同数字的方块相撞时，它们会 <strong>合并成一个！</strong>
    </p>
    <hr>
    <p>
    <strong class="important">注意：</strong> 这是 2048 的官方版本。你可以通过 <a href="http://git.io/2048">http://git.io/2048</a> 在手机上玩。所有其他应用或网站都是衍生版本或仿制品，使用时请谨慎。
    </p>
    <hr>
    <p>
    由 <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli</a> 创建。基于 <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">Veewo Studio 的 1024</a>，概念上类似于 <a href="http://asherv.com/threes/" target="_blank">Asher Vollmer 的 Threes</a>。
    </p>
      </div>

    <!-- 设置弹窗 -->
    <div class="settings-modal" id="settings-modal">
      <div class="settings-content">
        <div class="settings-header">
          <h3 id="settings-title">设置</h3>
          <span class="close-button" id="close-settings">&times;</span>
        </div>
        <div class="settings-body">
          <div class="setting-item">
            <label for="language-select" id="language-label">语言</label>
            <select id="language-select">
              <option value="zh">中文</option>
              <option value="en">English</option>
            </select>
          </div>
        </div>
      </div>
    </div>

  <script src="js/polyfills/bind_polyfill.js"></script>
  <script src="js/polyfills/classlist_polyfill.js"></script>
  <script src="js/polyfills/animframe_polyfill.js"></script>
  <script src="js/config/languages.js"></script>
  <script src="js/ui/settings_manager.js"></script>
  <script src="js/ui/keyboard_input_manager.js"></script>
  <script src="js/ui/html_actuator.js"></script>
  <script src="js/ui/local_storage_manager.js"></script>
  <script src="js/core/grid.js"></script>
  <script src="js/core/tile.js"></script>
  <script src="js/core/game_manager.js"></script>
  <script src="js/application.js"></script>
</body>
</html>
